#{extends 'Commodities/frame.html' /}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/galleryview/galleryview.css'}" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/galleryview/jquery.timers-1.2.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/galleryview/jquery.galleryview-2.1.1.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
<script language="javascript">
	//把商品列表设置为选中状态
	$(function(){
		$(".categorynav ul li").removeClass("active");
		$("#commodity_item").addClass("active");
		$('#gallery').galleryView({
			panel_width: 400,
			panel_height: 400,
			frame_width: 50,
			frame_height: 50,
			pause_on_hover: true, //鼠标在上面就暂停
			show_filmstrip: true //显示导航小图，默认为true
		});
	});
	function buy(id) {
		var quantity = $("#quantity").val();
		$.ajax({
			url: "@{ShoppingCars.buy()}",
			data: "commodityId="+id+"&quantity="+quantity,
			type: "POST",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "购买失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
				} else {
					var errMsg = "购买成功，请查看您的购物车。";
					alert(errMsg);
					$("#quantity_"+id).val(0);
				}
			}
		});
	}
	function add2Batch(id) {
		$.ajax({
			url: "@{Batchs.add()}",
			data: "commodityId="+id,
			type: "POST",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "操作失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
				} else {
					window.open("@{Batchs.batch()}");
				}
			}
		});
	}
</script>
<ul id="gallery">
#{if commodity.images}
	#{list items:commodity.images, as:'image'}
		<li><img class="midImg" src="@{Attachments.show(image.image.id)}" ></li>
	#{/list}
#{/if}
#{else}
<li><img class="midImg" src="@{'public/images/favicon.png'}" ></li>
#{/else}
</ul>

*{ 商品属性 }*
<div class="property">
	<div>
		<p><label>[商品编号]</label>${commodity.SN}</p>
		<p><label>[商品名称]</label>${commodity.name}</p>
		<p><label>[商品单位]</label>${commodity.unit}</p>
		<p><label>[商品尺寸]</label>${commodity.size}</p>
		<p><label>[单个重量]</label>${commodity.weight}</p>
		<p><label>[商品材质]</label>${commodity.material}</p>
		<p><label>[商品包装]</label>${commodity.packaging}</p>
		<p><label>[商品产地]</label>${commodity.placeOfOrigin}</p>
		<p><label>[装箱数量]</label>${commodity.numberPerBox}</p>
		<p><label>[毛重净重]</label>${commodity.grossWeight}/${commodity.netWeight}</p>
		<p><label>[商品价格]</label>批发价:￥${commodity.price}</p>
		<p>
			<label>[现货数量]</label>
			#{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_LIMITED}
				${commodity.quantityLeft} ${commodity.unit}
			#{/if}
			#{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_UNLIMITED}
				<font class="important">长期有货</font>
			#{/if}
			#{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.OFFSALE}
				<font class="important">已下架</font>
			#{/if}
		</p>
		<br>	
		<p>
			#{if session.username}
			<table class="product-input">
				<tr>
					<td><input class="text_1" id="quantity" size="5" type="text" maxlength="6" value="0"></td>
					<td>
						<input class="button_1" type="image" src="@{'/public/images/commodity/buy_btn.jpg'}" onclick="buy(${commodity.id});">
					</td>
					<td>
						<input class="button_1" type="image" src="@{'/public/images/commodity/addfavo_btn.jpg'}" onclick="add2Batch(${commodity.id});">
					</td>
				</tr>
			</table>
			#{/if}
		</p>
	</div>
</div>

<div class="introduction" style="width:100%;float:left;">
	<p><label>商品简介</label></p>
	<div id="description"><!-- 商结简介 -->
	${commodity.description?.raw()}
		
	</div><!-- 商结简介 -->
</div>